import React,{PureComponent} from 'react'
import {ScrollView,Dimensions, StyleSheet, View, Text, TouchableOpacity, Button, Animated,Image,FlatList} from 'react-native'

import MineRefuesCourseCell from './MineRefuesCourseCell'
const {width} = Dimensions.get('window')


type Props = {
    onPress:Function,
    info:Object,
    cancelPress:Function,
    payPress:Function,
}


export default class MineRefuesCell extends PureComponent<Props>{
    constructor(props){
        super(props)
        const {info} = props
        var course = info.course
        this.state = {
            courses:course.length>1?course.slice(0,1):course,
        }
    }
    render(){
        const {info} = this.props
        const course = info.course

        var staust =''

        if (info.refundStatus == 'unrefund'){
            staust = '未退款'
        } else if (info.refundStatus == 'refunding'){
            staust = '退款中'

        } else if (info.refundStatus == 'refund_success'){
            staust = '已退款'

        }else if (info.refundStatus == 'refund_fail'){
            staust = '退款失败'
        }

        return (
            <View style={styles.bg}>
                <TouchableOpacity onPress={()=>{this.props.onPress()}}>
                    <View style={{flexDirection:'row',alignItems:'center',marginTop:15}}>
                        <Text style={styles.text_show}>订单号:</Text>
                        <Text style={styles.text_data}>{info.orderSn}</Text>
                        <View style={{flex:1}}/>
                        <Text style={styles.text_show_right}>{staust}</Text>
                    </View>
                    <View style={{backgroundColor:'rgba(0,0,0,0.1)',width: width -24 -24,height:1,marginTop:15}}/>
                    <FlatList
                        style={{marginTop:5}}
                        data={this.state.courses}
                        renderItem={this.renderCell}
                        keyExtractor={this.keyExtractor}

                    />
                    <View style={{backgroundColor:'rgba(0,0,0,0.1)',width: width -24 -24,height:1,marginTop:15}}/>
                    {this.renderTui()}
                </TouchableOpacity>
            </View>
        )
    }
    renderTui(){
        const {info} = this.props


        if (info.refundStatus == 'refund_success'){
            return <View style={{flexDirection:'row',alignItems:'center',marginTop:15,marginBottom:11}}>
                <View style={{flex:1}}/>
                <View onPress={()=>{this.props.cancelPress()}} style={{marginLeft:15,borderRadius:13,backgroundColor:'#DCDCDC',height:25,width:67,justifyContent:'center',alignItems:'center'}}>
                    <Text style={{color:'#666666',fontSize:12,}}>删除订单</Text>
                </View>
                <View onPress={()=>{this.props.payPress()}} style={{marginLeft:15,borderRadius:13,backgroundColor:'#DB3843',height:25,width:67,justifyContent:'center',alignItems:'center'}}>
                    <Text style={{color:'white',fontSize:12,}}>再次购买</Text>
                </View>
            </View>
        } else if(info.refundStatus == 'refund_fail'){
            return <View style={{flexDirection:'row',alignItems:'center',marginTop:15,marginBottom:11}}>
                <View style={{flex:1}}/>
                <View onPress={()=>{this.props.cancelPress()}} style={{marginLeft:15,borderRadius:13,backgroundColor:'#DCDCDC',height:25,width:67,justifyContent:'center',alignItems:'center'}}>
                    <Text style={{color:'#666666',fontSize:12,}}>删除订单</Text>
                </View>
            </View>
        }else {
            return <View/>
        }
    }
    renderCell = (item: any) => {
        const {info} = this.props
        const course = info.course
        return (
            <MineRefuesCourseCell data={course} info={item.item} />
        )
    }
    keyExtractor = (item: Object, index: number) => {
        return index + ''
    }

}
const styles = StyleSheet.create({
    container:{
        backgroundColor:'white',
        paddingLeft:12,
        paddingRight:12,
    },
    text_show:{
        color:'#111111',
        fontSize:12,
        fontWeight:'bold',

    },
    text_data:{
        fontSize:12,
        color:'#999999',
        marginLeft:10,
    },
    text_show_right:{
        fontSize:13,
        color:'#DB3843',
    },
    price_show:{
        fontSize:20,
        color:'rgba(0,0,0,0.8)',
        fontWeight:'bold',
    },
    bg:{
        paddingLeft:12,
        paddingRight:12,
        backgroundColor:'white',
        borderRadius:5,
        flex:1,
        shadowColor:'#B5B5B6',
        shadowOffset:{h:2,w:2},
        shadowRadius:1,
        shadowOpacity:0.4,
        marginTop:12,
        marginLeft:12,
        marginRight:12,
    }

})